var dom = document.getElementById("p_area");
var myChart = echarts.init(dom);
var app = {};
var option;
var data1 = [1022, 1113, 1110, 2213]; //当月在售
var data2 = [2002, 1118, 1119, 2123]; //当月销量
//var data3 = [22, 18, 19, 23];		//在册总数
var total_data = function() {
	var datas = [];
	for (var i = 0; i < data1.length; i++) {

		datas.push(data1[i] + data2[i]);
	}
	return datas;
}();
option = {
	legend: {
		orient: 'horizontal',
		x: 'center', //图例位置
		y: '78%',
		itemWidth: 12, //图例宽
		itemHeight: 12, //图例高
		itemGap: 30, //图例之间间距
		textStyle: {
			color: '#b1bcff', //更改坐标轴文字颜色
			fontSize: 15 //更改坐标轴文字大小
		},
		data: [{
				name: '当月在售',
				icon: 'rect',
			},
			{
				name: '当月销量',
				icon: 'rect',
			}
		]
	},
	grid: {
		left: '3%',
		right: '6%',
		bottom: '28%',
		top: '6%',
		containLabel: true
	},
	xAxis: [{
		type: 'value',
		//boundaryGap: true, //去除图表四周留白
		axisLine: { //x轴线条颜色
			show: true,
			lineStyle: {
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: {
			show: true,
			textStyle: {
				//align: 'left' ,
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
		splitLine: {
			show: false
		}
	}],
	yAxis: [{
		type: 'category',
		axisTick: {
			show: false
		},
		axisLine: { //x轴线条颜色
			show: true,
			lineStyle: {
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: {
			show: true,
			textStyle: {
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},
		data: ['竞彩在册', '即开在册', '专营在册', '兼营在册']
	}],
	animationDuration: 3000,
	series: [{
			name: '当月在售',
			type: 'bar',
			stack: 'total',
			barWidth: 25, //柱形宽度
			label: {
				normal: {
					show: true,
					position: 'inside',
					textStyle: {
						color: '#fff', //更改坐标轴文字颜色
						fontSize: 15 //更改坐标轴文字大小
					},
					formatter: function(p) {
						let value = ''
						if (p.value > 0) {
							value = p.value
							if (value > 999) {
								// 数值加千分号
								let parts = value.toString().split('.')
								parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
								value = parts.join('.')
							}
						}
						return value
					}
				}
			},
			itemStyle: { //柱形色
				normal: {
					color: '#3376ff'
				},
			},
			data: data1,
			//data: [2421, 1700, 2140, 2424]
		},
		{
			name: '当月销量',
			type: 'bar',
			stack: 'total', //堆叠柱形
			barWidth: 25, //柱形宽度
			label: {
				show: true,
				position: 'inside',
				textStyle: {
					color: '#000', //更改坐标轴文字颜色
					fontSize: 15 //更改坐标轴文字大小
				},
				formatter: function(p) {
					let value = ''
					if (p.value > 0) {
						value = p.value
						if (value > 999) {
							// 数值加千分号
							let parts = value.toString().split('.')
							parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
							value = parts.join('.')
						}
					}
					return value
				}
			},
			itemStyle: { //柱形色
				normal: {
					color: '#33c8ff'
				},
			},
			data: data2,
		},
		{
			name: '总计',
			type: 'bar',
			stack: '总计',
			label: {
				normal: {
				    show: true,
				    position: ['105%','-25'],
					textStyle: {
						color: '#b1bcff', //更改坐标轴文字颜色
						fontSize: 15 //更改坐标轴文字大小
					},
					formatter: function(p) {
						let value = ''
						if (p.value > 0) {
							value = p.value
							if (value > 999) {
								// 数值加千分号
								let parts = value.toString().split('.')
								parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
								value = parts.join('.')
							}
						}
						return value
					}
				}
			},
			data: total_data
		}
	]
};

if (option && typeof option === 'object') {
	myChart.setOption(option);
}
